<template>
    <div>
        <div class="row sm-hidden">
            <div class="col-md-4">
                <ul>
                    <li class="nav-item">
                        <button id="line-cost-btn" v-on:click="toLineCost()"
                                v-bind:class="btnLineCostClass"
                                class="normal-size"
                        >每日总支出变化图</button>
                    </li>
                    <li class="nav-item">
                        <button id="line-income-btn" v-on:click="toLineIncome()"
                                v-bind:class="btnLineIncomeClass"
                                class="normal-size"
                        >每日总收入变化图</button>
                    </li>
                </ul>
            </div>

            <div class="col-md-4">
                <ul>
                    <li class="nav-item">
                        <button id="pie-cost-btn" v-on:click="toPieCost()"
                                v-bind:class="btnPieCostClass"
                                class="normal-size"
                        >每月支出成分饼状图</button>
                    </li>
                    <li class="nav-item">
                        <button id="pie-income-btn" v-on:click="toPieIncome()"
                                v-bind:class="btnPieIncomeClass"
                                class="normal-size"
                        >每月收入成分饼状图</button>
                    </li>
                </ul>
            </div>
            <div class="col-md-4">
                <ul>
                    <li class="nav-item">
                        <button v-on:click="toBarCompare()"
                                v-bind:class="btnBarCompareClass"
                                class="normal-size"
                        >支出收入对比图</button>
                    </li>
                    <li class="nav-item">
                        <button v-on:click="toLineProfit()"
                                v-bind:class="btnLineProfitClass"
                                class="normal-size"
                        >净收入折线图</button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">

            <span v-show="showYear" class="col-md-auto col-sm-auto">选择年：</span>
            <div v-show="showYear" class="col-md-4">
                <select v-model="year" class="form-control" v-on:change="onChange()">
                    <option v-for="yearInArray in YEAR_ARRAY">{{yearInArray}}</option>
                </select>
            </div>
            <span v-show="showMonth" class="col-md-auto col-sm-auto">选择月：</span>
            <div v-show="showMonth" class="col-md-4">
                <select v-model="month" class="form-control" v-on:change="onChange()">
                    <option v-for="i in 12">{{i}}</option>
                </select>
            </div>
        </div>
        <hr>
        <div class="row">
            <router-view></router-view>
            <div v-show="!btnClick" class="col-md-12 text-center sm-hidden">
                <span>点击<b>上方</b>按钮以显示自己的<b>定制化图表</b>，<b>以下</b>是<b>样例图</b>，点击左右按钮进行滚动</span>
            </div>
            <div style="margin-left: 13px" v-show="!btnClick" id="carouselExampleIndicators" class="sm-hidden carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active bg-secondary"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1" class="bg-secondary"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2" class="bg-secondary"></li>
                </ol>
                <div class="carousel-inner" style="width: 100%;height: 400px">
                    <div class="carousel-item active">
                        <img src="../../assets/img-1.png" class="d-block w-100 img-fluid" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="../../assets/img-2.png" class="d-block w-100 img-fluid" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="../../assets/img-3.png" class="d-block w-100 img-fluid" alt="...">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon bg-secondary" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon bg-secondary" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

    </div>
</template>

<script>

    export default {
        name: "Graph",
        data() {
            return {
                btnClick: false,
                year: null,
                month: null,
                YEAR_ARRAY: YEAR_ARRAY,

                showYear: true,
                showMonth: true,

                btnLineCost: false,
                btnLineIncome: false,
                btnPieCost: false,
                btnPieIncome: false,
                btnCompare: false,
                btnLineProfit: false,
            }
        },
        mounted() {
            let date = new Date();
            let _this = this;
            _this.year = date.getFullYear();
            _this.month = date.getMonth()+1;

        },
        computed:{
            btnLineCostClass(){
                return {
                    'btn btn-outline-primary': this.btnLineCost === false,
                    'btn btn-primary': this.btnLineCost === true,
                }
            },
            btnLineIncomeClass(){
                return {
                    'btn btn-outline-info': this.btnLineIncome === false,
                    'btn btn-info': this.btnLineIncome === true,
                }
            },
            btnPieCostClass(){
                return {
                    'btn btn-outline-primary': this.btnPieCost === false,
                    'btn btn-primary': this.btnPieCost === true,
                }
            },
            btnPieIncomeClass(){
                return {
                    'btn btn-outline-info': this.btnPieIncome === false,
                    'btn btn-info': this.btnPieIncome === true,
                }
            },
            btnBarCompareClass(){
                return {
                    'btn btn-outline-primary': this.btnCompare === false,
                    'btn btn-primary': this.btnCompare === true,
                }
            },
            btnLineProfitClass(){
                return {
                    'btn btn-outline-info': this.btnLineProfit === false,
                    'btn btn-info': this.btnLineProfit === true,
                }
            }
        },
        methods:{
            /**
             * 把所有btn标记置为false
             */
            btnToFalse(){
                let _this = this;
                _this.btnLineCost = false;
                _this.btnLineIncome = false;
                _this.btnPieCost = false;
                _this.btnPieIncome = false;
                _this.btnCompare = false;
                _this.btnLineProfit = false;
            },
            /**
             * 点击【每日总支出变化图】
             */
            toLineCost(){
                let _this = this;
                _this.btnClick = true;
                _this.btnToFalse();
                _this.btnLineCost = true;
                _this.$router.push('/graph/line-cost');
            },
            /**
             * 点击【每日总收入变化图】
             */
            toLineIncome(){
                let _this = this;
                _this.btnClick = true;
                _this.btnToFalse();
                _this.btnLineIncome = true;
                _this.$router.push('/graph/line-income');
            },
            /**
             * 点击【每月支出成分饼状图】
             */
            toPieCost(){
                let _this = this;
                _this.btnClick = true;
                _this.btnToFalse();
                _this.btnPieCost = true;
                _this.$router.push('/graph/pie-cost');
            },
            /**
             * 每月收入成分饼状图
             */
            toPieIncome(){
                let _this = this;
                _this.btnClick = true;
                _this.btnToFalse();
                _this.btnPieIncome = true;
                _this.$router.push('/graph/pie-income');
            },
            /**
             * 点击【支出收入比较图】
             */
            toBarCompare(){
                let _this = this;
                _this.btnClick = true;
                _this.btnToFalse();
                _this.btnCompare = true;
                _this.$router.push('/graph/bar-compare');
            },
            /**
             * 点击【纯利润图】
             */
            toLineProfit(){
                let _this = this;
                _this.btnClick = true;
                _this.btnToFalse();
                _this.btnLineProfit = true;
                _this.$router.push('/graph/line-profit');
            },
            /**
             * 日期改变通知子组件
             */
            onChange(){
                let _this = this;
                for(let i=0;i<_this.$children.length;i++){
                    let child = _this.$children[i]
                    child.year = _this.year;
                    child.month = _this.month;
                }
            }
        }
    }
</script>

<style scoped>
    .normal-size{
        width: 170px;
    }
</style>